<template>
  <div class="w-full h-full  relative flex-c flex-col ">
    <bg class="absolute top-0 left-0 w-full h-full" />
    <!-- <div class="flex-c absolute right-5 top-3">
      <el-switch v-model="dataTheme" inline-prompt :active-icon="dayIcon" :inactive-icon="darkIcon"
        @change="dataThemeChange" />
    </div> -->
    <div class="relative" style="backdrop-filter: blur(10px);">
      <border ref='borderRef' class="absolute top-0 left-0" />
      <div class="relative w-full h-full p-[5px] ">
        <div class="p-[50px]  w-[400px] h-[490px]">
          <div
            class="font-bold text-[30px] text-center text-transparent bg-clip-text bg-gradient-to-b from-[#FFF] to-[#4583ff] mb-[50px]">
            {{ isNullOrEmpty(config.Title) }}
          </div>
          <div v-if="!isRegist">
            <!-- <div class="mt-[10px] text-[20px] text-center text-white ">欢迎登录</div> -->
            <div class="pb-[16px] mb-[16px] flex-c  text-center relative">
              <div :class="`${checkedIndex == 0 ? 'text-[#fff]' : 'text-[#B6CDE6]'} w-[150px] cursor-pointer`"
                @click="checkedIndex = 0">账号密码登录</div>
              <div :class="`${checkedIndex == 1 ? 'text-[#fff]' : 'text-[#B6CDE6]'} w-[150px] cursor-pointer`"
                @click="checkedIndex = 1">短信验证码登录</div>
              <div :class="`w-[100%] h-[1px] bg-[#195D88] absolute bottom-0 left-0 `">
              </div>
              <div
                :class="`w-[50%] h-[1px] bg-[#B6CDE6] absolute bottom-0 left-0 duration-300 ${checkedIndex == 0 ? 'translate-x-0' : 'translate-x-full'}`">
              </div>
            </div>
            <div class="login-box">
              <div class="login-form">
                <login v-if="checkedIndex === 0" @go-regist="isRegist = true" @focus="stopBorder()"
                  @blur="startBorder()" />
                <phone v-if="checkedIndex === 1" @go-regist="isRegist = true" @focus="stopBorder()"
                  @blur="startBorder()" />
              </div>
            </div>
          </div>
          <div v-if="isRegist" class=" mt-[16px]">
            <!-- <div class="mt-[10px] mb-[16px] text-[20px] text-center text-white ">欢迎注册</div> -->
            <regist @go-login="isRegist = false" @focus="stopBorder()" @blur="startBorder()" />
          </div>
        </div>
      </div>
    </div>
    <div class="relative mt-[20px] flex-c cursor-pointer" @click="openDownload">
      <el-icon color="#fff" class="mr-[10px]">
        <FullScreen />
      </el-icon>扫码下载APP
    </div>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import bg from './components/bg.vue'
import border from './components/border.vue'
import login from './components/login.vue'
import phone from "./components/phone.vue";
import regist from "./components/regist.vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/images/svg/day.svg?component";
import darkIcon from "@/assets/images/svg/dark.svg?component";
import { deviceDetection, useGlobal } from "@pureadmin/utils";
import { FullScreen } from "@element-plus/icons-vue"
import { addDialog } from '@/components/ReDialog';
import appDownload from './components/appDownload.vue'

const { dataTheme, dataThemeChange } = useDataThemeChange();
const borderRef = ref()
const checkedIndex = ref(0)
const isRegist = ref(false)
const config = ref(useGlobal().$config)

onMounted(() => {
  // dataThemeChange()
})
const startBorder = () => {
  borderRef.value.start()
}

const stopBorder = () => {
  borderRef.value.stop()
}
const openDownload = () => {
  addDialog({
    title: `扫码下载`,
    width: "400px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    hideFooter:true,
    contentRenderer: () => h(appDownload),
  });
}
</script>

<style lang="scss" scoped>
:deep(.login-form) {
  --el-fill-color-light: #fff;
  --el-text-color-regular: #fff !important;
  --el-button-bg-color: transparent;


  .el-input {
    --el-border-color: #0B204A;
    --el-border-color-hover: #6C6E72;
    --el-fill-color-blank: #0B204A;
    --el-text-color-placeholder: #8D9095;
    --el-input-text-color: #ffffff;

    .el-input-group__append,
    .el-input-group__prepend {
      padding: 0;
    }
  }

  .el-checkbox {
    .el-checkbox__inner {
      border-color: rgba(255, 255, 255, 0.5) !important;
      background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .is-checked {
      .el-checkbox__inner {
        border-color: var(--el-color-primary) !important;
        background-color: var(--el-color-primary) !important;
      }
    }
  }

  .el-form-item__content {
    .el-button {
      background-color: transparent;
      border-color: var(--el-color-primary);
    }
  }

}
</style>
